<template>
	<view>

		<view class="inputBox" style="width: 100vw;height:86vh;overflow: auto;padding-bottom: 2vh;">
			<view style="width: 100vw;height: 5vh;display: flex;justify-content: center;align-items: center;">
				{{time}}
			</view>
			<view class="left">
				<image style="width: 10vw;height: 10vw;margin-right: 3vw;margin-left: 3vw;"
					src="http://111.231.22.97:9000/jiqiren.png" mode=""></image>
				<view class="chatDialogBox">
					请选择:
					<view style="margin-top: 2vw;font-size: 30rpx;" v-for="(item,index) in arr1" :key="index"
						@click="select(item)">
						{{item}}
					</view>
				</view>
			</view>
			<view v-for="(item,index) in arr" :key="index">
				<view class="right" v-if="item.identity==0">
					<image style="width: 10vw;height: 10vw;margin-right: 3vw;margin-left: 3vw;"
						src="http://111.231.22.97:9000/jiqiren.png" mode=""></image>
					<view class="chatDialogBox">
						{{item.problem}}
					</view>
				</view>

				<view class="left" v-else>
					<image style="width: 10vw;height: 10vw;margin-right: 3vw;margin-left: 3vw;"
						src="http://111.231.22.97:9000/jiqiren.png" mode=""></image>
					<view class="chatDialogBox">
						<view v-for="(i,index1) in item.answers" :key="index1">
							{{i}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view
			style="width: 100vw;height: 12vh;background-color: #fff;display: flex;justify-content: center;align-items: center;">
			<view class="bottom">
				<u--input placeholder="请输入内容" border="surround" v-model="problem"></u--input>
				<view class="btn" @click="go">发送</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		answersQuestions
	} from "@/ww.js"
	export default {
		data() {
			return {
				problem: '如何',
				arr: [],
				arr1: ['如何完成支付？', '如何修改个人信息?', '如何更换修改地址？'],
				time: '',
				show: true,
			}
		},
		onLoad() {},
		onShow() {
			function formatDate(datetime) {
				// 获取年月日时分秒值  slice(-2)过滤掉大于10日期前面的0
				var year = datetime.getFullYear(),
					month = ("0" + (datetime.getMonth() + 1)).slice(-2),
					date = ("0" + datetime.getDate()).slice(-2),
					hour = ("0" + datetime.getHours()).slice(-2),
					minute = ("0" + datetime.getMinutes()).slice(-2),
					second = ("0" + datetime.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
				// 返回
				return result;
			}
			var date = new Date();
			this.time = formatDate(date)
		},
		methods: {
			select(e) {
				this.arr.push({
					identity: 0,
					problem: e,
				})
				let time = null
				if (this.show) {
					this.show = false
					time = setTimeout(() => {
						if (e) {
							answersQuestions({
								problem: e
							}).then(res => {
								if (res.data.length != 0) {
									res.data.forEach(i => {
										i.answers = i.answers.split('/')
										this.arr.push({
											answers: i.answers
										})
									})
								}
							})
						}
						clearTimeout(time)
						time = null
						this.show = true
					}, 1000)
				} else {
					this.arr.push({
						answers: ['请不要频繁操作']
					})
				}
			},
			go() {
				let time = null
				let temp = ''
				let aaa = []
				if (this.problem) {
					this.arr.push({
						identity: 0,
						problem: this.problem,
					})
					temp = this.problem
					this.problem = ''
				}
				if (this.show) {
					this.show = false
					time = setTimeout(() => {
						if (temp) {
							answersQuestions({
								problem: temp
							}).then(res => {
								if (res.data.length == 1) {
									this.arr.push({
										answers: res.data[0].answers.split('/')
									})
								} else if (res.data.length > 1) {
									res.data.forEach(i => {
										aaa.push(i.problem)
									})
									this.arr.push({
										answers: aaa
									})
								} else {
									this.arr.push({
										answers: ['抱歉，查询不到相关信息']
									})
								}
							})
						}
						clearTimeout(time)
						time = null
						this.show = true
					}, 10)
				} else {
					this.arr.push({
						answers: ['请不要频繁操作']
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.right {
		display: flex;
		flex-direction: row-reverse;
		width: 100vw;
		margin-top: 2vw;

		.chatDialogBox {
			width: 50vw;
			background-color: rgb(255, 255, 255);
			color: #000;
			border: 1px solid rgb(237, 237, 237);
			min-height: 20px;
			padding: 8px 15px;
			position: relative;
			border-radius: 5px;
			font-size: 14px;
			word-wrap: break-word;
		}

		.chatDialogBox:before,
		.chatDialogBox:after {
			content: "";
			display: block;
			position: absolute;
			width: 0;
			height: 0;
			border: 6px solid transparent;
			border-left-color: rgba(255, 255, 255, 1);
			right: -11px;
			top: 10px;
			z-index: 1;
		}

		// .chatDialogBox:after {
		// 	right: -12px;
		// 	border-right-color: rgb(237, 237, 237);
		// 	z-index: 0;
		// }

	}

	.left {
		display: flex;
		width: 100vw;
		margin-top: 2vw;

		.chatDialogBox {
			width: 50vw;
			background-color: rgb(255, 255, 255);
			color: #000;
			border: 1px solid rgb(237, 237, 237);
			min-height: 20px;
			padding: 8px 15px;
			position: relative;
			border-radius: 5px;
			font-size: 14px;
			word-wrap: break-word;
		}

		.chatDialogBox:before,
		.chatDialogBox:after {
			content: "";
			display: block;
			position: absolute;
			width: 0;
			height: 0;
			border: 6px solid transparent;
			border-right-color: rgba(255, 255, 255, 1);
			left: -11px;
			top: 10px;
			z-index: 1;
		}

		// .chatDialogBox:after {
		// 	left: -12px;
		// 	border-right-color: rgb(237, 237, 237);
		// 	z-index: 0;
		// }
	}



	.bottom {
		bottom: 7vw;
		height: 10vw;
		width: 100vw;
		display: flex;

		.btn {
			width: 15vw;
			height: 10vw;
			background-color: #40bdfd;
			text-align: center;
			line-height: 10vw;
			border-radius: 30rpx;
			margin-left: 5vw;
			margin-right: 3vw;
			font-size: 30rpx
		}

		::v-deep .u-input {
			background-color: #f0f0f0;
			height: 10vw;
			width: 70vw;
			padding-top: 0 !important;
			padding-bottom: 0 !important;
			margin-left: 3vw;
			border-radius: 30rpx;
		}
	}
</style>